<template>
<<<<<<< HEAD
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="sidebar.collapse" background-color="#2f4050"
            text-color="#bfcbd9" active-text-color="#fff" unique-opened router>
            <!--  有内容的卡片 -->
            <div v-if="!sidebar.collapse">
                <el-row>
                    <el-col>
                        <el-card class="box-card" :body-style="{ padding: '0px' }">
                            <el-image style="width:90px; height: 90px" :src="avatarUrl" fit="contain" />
                            <div style="padding: 14px;color: #fff;">
                                <span>{{ user.userName }}</span>
                            </div>
                            <div style="padding: 14px">

                                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                                    <span class="el-dropdown-link">
                                        {{ user.userRole }}
                                        <el-icon class="el-icon--right">
                                            <arrow-down />
                                        </el-icon>
                                    </span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item command="modifyAvatar">修改头像</el-dropdown-item>
                                            <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                                            <el-dropdown-item command="contacts">联系我们</el-dropdown-item>
                                            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>

                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <div v-else class="logo-element">
                <el-row>
                    <el-col>
                        <el-card class="box-card01" :body-style="{ padding: '0px' }">
                            <div style="padding: 14px;color: #fff;">
                                <span>LeMa</span>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>


            </div>
            <template v-for="item in menuList">
                <template v-if="item.subMenus">
                    <el-sub-menu :index="item.menuUrl + item.id" :key="item.id" >
                        <template #title>
                            <!-- <el-icon>
                                <component :is="item.iconName"></component>
                            </el-icon> -->
                            <i :class="'iconfont ' + item.iconName"></i>
                            <span>{{ item.menuName }}</span>
                        </template>
                        <template v-for="subItem in item.subMenus">
                            <el-sub-menu v-if="subItem.subMenus" :index="subItem.menuUrl" :key="subItem.id"
                                >
                                <template #title>{{ subItem.menuName }}</template>
                                <el-menu-item v-for="(threeItem, i) in subItem.subMenus" :key="i"
                                    :index="threeItem.menuUrl">
                                    {{ threeItem.menuName }}
                                </el-menu-item>
                            </el-sub-menu>
                            <el-menu-item v-else :index="subItem.menuUrl" >
                                <!-- <el-icon>
                                   <component :is="subItem.iconName"></component>
                                 </el-icon> -->
                                <i class="iconfont icon-big-circle"></i>
                                {{ subItem.menuName }}
                            </el-menu-item>
                        </template>
                    </el-sub-menu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.menuUrl + item.id" :key="item.id">
                        <!-- <el-icon>
                            <component :is="item.iconName"></component>
                        </el-icon> -->
                        <el-icon>
                            <Edit />
                        </el-icon>
                        <template #title>{{ item.menuName }}</template>
                    </el-menu-item>
                </template>
            </template>

        </el-menu>
    </div>
</template>

<script setup >
import { computed, reactive, onMounted } from 'vue';
import { useSidebarStore } from '../stores/sidebar';
import { useMenu } from '../stores/Menu';
import { useRoute, useRouter } from 'vue-router';
import avatarUrl from '../assets/img/profile.jpg'

const user = reactive({
    userName: localStorage.getItem("ms_username"),
    userRole: '超级管理员'
})

const menu = useMenu();
const menuList = menu.menuList;
console.log('barmenue>>>', menuList)

const route = useRoute();
const onRoutes = computed(() => {
    return route.path;
});
const router = useRouter()
const sidebar = useSidebarStore();

const handleCommand = (command) => {
    if (command == 'loginout') {
        console.log('--------loginout----')
        // localStorage.removeItem('ms_username');
        // localStorage.removeItem('token')
        localStorage.clear()
        router.push('/login');
    } else if (command == 'user') {
        router.push('/user');
    }
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    bottom: 0;
    overflow-y: scroll;
    background-color: #2f4050;
}

.sidebar::-webkit-scrollbar {
    width: 0;

}

.sidebar-el-menu:not(.el-menu--collapse) {
    width: 251px;
}

.sidebar>ul {
    height: 100%;
}

/* .avatar {
    background-color:#324157;
    color: #fff;
    padding-left: 20px;
    align-items: center;
    
} */

.el-dropdown-link {
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.el-dropdown-menu__item {
    text-align: center;
}

.box-card {
    background: url('../assets/img/header-profile.png');
    border: 0;
    /* padding-left: 20px; */
    padding: 33px 25px;
    width: 250px;
    height: 172px;
}
/* .logo-element {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: white;
    display: none;
    padding: 18px 0;
} */
.box-card01 {
    text-align: center;
    background: url('../assets/img/header-profile.png');
    border: 0;
    height: 50px;
    color: #fff;
    font-size: 18px;
}

/* .el-menu-item.is-active {
     color: white; 
} */
.iconfont {
    margin-right: 8px;
    font-size: 13px;
}
</style>
=======
  <el-aside :width="sidebar.isCollapse ? '64px' : '240px'" > 

    <div style="padding: 10px 0; text-align: center;">
      <img src="@/assets/logo/logo-94.png" style="width: 45px; height: 45px;">
      <span v-show="!sidebar.isCollapse"
            style="font-size: 1.4em; font-weight: 700; color: rgb(56,18,110); margin-left: 10px;">51code.vip</span>
    </div>
  
    <el-menu @select="handleSelect" :default-active="activeTab" :collapse="sidebar.isCollapse"
             class="aside-vertical-menu">
      <template v-for="(topMenu, index) in topMenuList">
        <el-sub-menu v-if="topMenu.children && topMenu.children.length" :key="index" :index="topMenu.name">
          <template #title>
            <el-icon>
              <component :is="topMenu.meta.icon"/>
            </el-icon>
            <span>{{ topMenu.meta.title }}</span>
          </template>

          <el-menu-item v-for="child in topMenu.children" :key="child.name" :index="child.name">
            <el-icon>
              <component :is="child.meta.icon"/>
            </el-icon>
            <span>{{ child.meta.title }}</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item v-else="!topMenu.children && topMenu.meta" :key="index + 1" :index="topMenu.name">
          <el-icon>
            <component :is="topMenu.meta.icon"/>
          </el-icon>
          <span>{{ topMenu.meta.title }}</span>
        </el-menu-item>
      </template>

    </el-menu>
 
  </el-aside>
</template>

<script setup>
import {ref, reactive, computed} from 'vue'
import {useSidebarStore} from '@/stores/sidebar';
import {useRoute, useRouter} from 'vue-router'
import {useTabsStore} from '@/stores/tabs.js'

const sidebar = useSidebarStore();
//获取pinia中的标签管理tabs
const tabsStore = useTabsStore()
//获取路由器实例，用途：用于编程式导航和访问全局路由相关的方法和属性。
const router = useRouter()
//获取当前激活的路由对象， 用途：用于访问当前路由的信息，如路径、参数、查询参数、元数据等。
const route = useRoute()
/*****
 * 通过计算属性来从路由表中获取左侧的菜单信息：
 * 注：这里只获取一级菜单项，要把子菜单项给过滤掉。
 * 判断route中的meta对象中的top属性来判断是否是顶级菜单项
 */
const topMenuList = computed(() => router.getRoutes().filter(r => r.meta.top))
console.log(topMenuList, 'topMenuList....', router.getRoutes())

/*************************
 * 处理菜单中的点击事件，当点击左侧的菜单时，需要把当前点击的菜单项添加到tabs中，并且采用编程式路由进行跳转、
 * 注：此方法只有当点击在 <el-menu-item>标签上时才会触发, 在<el-sub-menu>标签上，则不会触发
 */
const handleSelect = (index) => {
  console.log(">>你点击的菜单项是: ", index)
  console.log(">>>当前routes:", topMenuList.value)
  //找到你点击的菜单项，如果有子菜单项，则找到子菜单项。 这里的r.children? 使用了可选链操作符 (Optional Chaining Operator)。
  //它的作用是简化属性访问和方法调用时的条件判断，避免出现 undefined 或 null 导致的错误。它相当于：r.children && r.children.some(child => child.name === index)
  const menuRoute = topMenuList.value.find(r => r.name === index || r.children?.some(child => child.name === index))
  console.log("1. 你点击菜单对的路由对象: ", menuRoute)
  // 上面拿到的路由对象，则topMenu，接下来要判断当前点击的菜单项是否是子菜单项，如果是子菜单项，则需要找到子菜单项对应的路由对象
  const childRoute = menuRoute?.children?.find(child => child.name === index)
  console.log("2. 你点击菜单项的子菜单项: ", childRoute)
  // 根据判断结果，选择正确的路由对象
  const selectedRoute = childRoute || menuRoute
  console.log("3. 真正点击的路由: ", selectedRoute)
  if (selectedRoute && selectedRoute.meta) {
    //调用pinia中的标签管理中的添加标签的方法，把你选择的菜单项添加到tabs中
    //tabsStore.addTab(selectedRoute)
    tabsStore.addTab({title: selectedRoute.meta.title, name: selectedRoute.name})
    // 编程式路由跳转
    router.push({name: selectedRoute.name})
  }
}

//通过计算属性来获取当前激活的标签页，因为tabsStore.activeTab是响应式的
const activeTab = computed(() => tabsStore.activeTab)
//const activeTab = tabsStore.activeTab
console.log("================ activeTab: ", activeTab.value)

</script>
<style lang="less" scoped>
.custom-aside {
  transition: width 0.3s; /* 添加过渡效果 */
}

.custom-aside .el-menu {
  background-color: #ffffff; /* 展开状态下的背景色 */
}

.custom-aside.is-collapse .el-menu {
  background-color: #ffffff; /* 折叠状态下的背景色 */
}

.custom-aside .el-menu-item {
  color: rgb(56, 18, 110); /* 菜单项的文字颜色 */
}

.custom-aside .el-menu-item:hover {
  background-color: #409eff; /* 鼠标悬停时的背景色 */
  color: #fff; /* 鼠标悬停时的文字颜色 */
}

.custom-aside .el-sub-menu__title {
  color: #c0c4cc; /* 子菜单项的文字颜色 */
}

.custom-aside .el-sub-menu__title:hover {
  background-color: #409eff; /* 鼠标悬停时的背景色 */
  color: #fff; /* 鼠标悬停时的文字颜色 */
}


.aside-vertical-menu:not(.el-menu--collapse) {
  width: 225px;
  min-height: 100vh;
}

.el-aside {
  background-color: #f2f2f2;
}

</style>
>>>>>>> c088509ecc2282a34d0b932f6925d649261c336d
